<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="page.js"></script>
    <!--    page.js的导入必须位于vue.js下面-->
</head>
<body>
<div id="a" style="...">
    <table>
        <!--        展示分页数据-->
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>时间</th>
            <th>内容</th>
        </tr>
        <tr v-for="row in result.data">
            <td>{{row.id}}</td>
            <td>{{row.title}}</td>
            <td>{{row.intime}}</td>
            <td>
                <div style="max-width: 200px;max-height: 20px;overflow: hidden">
                    {{row.content}}
                </div>
            </td>
        </tr>
    </table>
    <el-pagination ref="p" @page-change="query"
                   background current-page="1"
                   layout="first,prev,pager,next,last"
                   page-size="10"
                   :total="result.total">
    </el-pagination>
</div>
<script>
    var v = new Vue({
        el: "#a",
        data: {
            result: {}
        },
        created() {
            axios.get(`../../QueryNewsServlet?currentPage=3&pageSize=10`).then(res => {
                //res 就是后台返回的数据,
                //res.data ==》{data,tatol}
                this.result = res.data;
                console.info(this.result)
            });
        },
        methods: {
            query(curPage) {
                axios.get(`../../QueryNewsServlet`, {
                    params: {
                        currentPage: curPage,
                        pageSize: this.$refs.p.pageSize
                    }
                }).then(res => {
                    //res 就是后台返回的数据,但是
                    //res.data ==》{data,tatol}
                    this.result = res.data;
                    console.info(this.result)
                });
            }
        }
    })
</script>
</body>
</html>